<template>
	<div class="router-tabs-box">
		<el-scrollbar class="router-tabs-scrollbar">
			<div class="router-tabs">
				<el-popover
					ref="popoverRef"
					popper-class="router-tabs-popper"
					:width="120"
					v-for="(item, index) in data.routeList"
					:key="index"
					trigger="contextmenu"
					:hide-after="1"
					@show="popoverShow(index)"
				>
					<template #reference>
						<div class="router-tabs-list" @click="listClk(item, index)" :class="item.path === data.presentPath ? 'active-list' : ''">
							{{ item.title }}
							<div class="router-tabs-list-img" v-show="data.routeList.length > 1">
								<el-icon class="router-tabs-list-icon" @click.stop="close(item, index)"><Close /></el-icon>
							</div>
						</div>
					</template>
					<template #default>
						<div class="router-tabs-popper-list" @click="popperClk('reload', item, index)" v-show="item.path === data.presentPath">
							刷新
						</div>
						<div class="router-tabs-popper-list" @click="popperClk('current', item, index)" v-show="data.routeList.length > 1">
							关闭当前标签
						</div>
						<div class="router-tabs-popper-list" @click="popperClk('other', item, index)" v-show="data.routeList.length > 1">
							关闭其它标签
						</div>
						<div class="router-tabs-popper-list" @click="popperClk('left', item, index)" v-show="data.routeList.length > 1 && index != 0">
							关闭左侧标签
						</div>
						<div
							class="router-tabs-popper-list"
							@click="popperClk('right', item, index)"
							v-show="data.routeList.length > 1 && index != data.routeList.length - 1"
						>
							关闭右侧标签
						</div>
					</template>
				</el-popover>
			</div>
		</el-scrollbar>
	</div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const props = defineProps({
	maxNumber: {
		type: Number,
		default: 10
	}
});

const data = reactive({
	presentPath: router.currentRoute.value.path,
	routeList: []
});

const listClk = (item, index) => {
	if (item.path != data.presentPath) {
		router.push(item.path);
	}
};

const close = (item, index) => {
	data.routeList.splice(index, 1);
	if (item.path === data.presentPath) {
		if (index >= data.routeList.length) {
			router.push(data.routeList[index - 1].path);
		} else {
			router.push(data.routeList[index].path);
		}
	}
};

const popoverRef = ref();
const popoverShow = (index) => {
	for (let i = 0; i < popoverRef.value.length; i++) {
		if (i != index) {
			popoverRef.value[i].hide();
		}
	}
};

const popperClk = (type, item, index) => {
	if (type === 'reload') {
		location.reload();
	}
	if (type === 'current') {
		data.routeList.splice(index, 1);
		if (item.path === data.presentPath) {
			if (index >= data.routeList.length) {
				router.push(data.routeList[index - 1].path);
			} else {
				router.push(data.routeList[index].path);
			}
		}
	}
	if (type === 'other') {
		if (item.path != data.presentPath) {
			router.push(item.path);
		}
		data.routeList = [item];
	}
	if (type === 'right') {
		let rightList = data.routeList.slice(index + 1);
		let flag = false;
		for (let i = 0; i < rightList.length; i++) {
			if (rightList[i].path === data.presentPath) {
				flag = true;
				break;
			}
		}
		if (flag) {
			router.push(data.routeList[index].path);
		}
		data.routeList = data.routeList.slice(0, index + 1);
	}
	if (type === 'left') {
		let leftList = data.routeList.slice(0, index);
		let flag = false;
		for (let i = 0; i < leftList.length; i++) {
			if (leftList[i].path === data.presentPath) {
				flag = true;
				break;
			}
		}
		if (flag) {
			router.push(data.routeList[index].path);
		}
		data.routeList = data.routeList.slice(index);
	}
	popoverRef.value[index].hide();
};

watch(
	() => router.currentRoute.value.path,
	(newValue, oldValue) => {
		// console.log('当前路由', router.currentRoute.value.path)
		if (router.currentRoute.value.path === '/') return;
		data.presentPath = router.currentRoute.value.path;
		let pathObj = router.currentRoute.value;
		let flage = false;
		for (let i = 0; i < data.routeList.length; i++) {
			if (data.routeList[i].path === pathObj.path) {
				flage = true;
				break;
			}
		}
		if (!flage) {
			let obj = {
				path: pathObj.path,
				title: pathObj.meta.title
			};
			data.routeList.push(obj);
			if (data.routeList.length > props.maxNumber) {
				data.routeList.splice(0, 1);
			}
		}
	},
	{
		immediate: true
	}
);
</script>

<style lang="scss">
.router-tabs-box {
	z-index: 999;
	.router-tabs-scrollbar {
		width: 100%;
		height: auto;
		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
		padding: 0 20px;
		box-sizing: border-box;
	}
}
.router-tabs-popper {
	min-width: 120px !important;
	.router-tabs-popper-list {
		cursor: pointer;
		padding: 5px 0;
		text-align: center;
		font-size: 13px;
		&:hover {
			color: #285fce;
			font-weight: bold;
			// background: #f5f5f5;
		}
	}
}
.router-tabs {
	width: 100%;
	box-sizing: border-box;
	// padding: 10px 0 10px 10px;
	padding: 10px 0;
	display: flex;
	align-items: center;
	.router-tabs-list {
		flex-shrink: 0;
		color: #ffffff;
		font-size: 14px;
		padding: 8px 10px;
		border-radius: 3px;
		position: relative;
		cursor: pointer;
		margin-right: 10px;
		background-color: #1f2b3c1d;
		color: #031927;
		display: flex;
		align-items: center;
		.router-tabs-list-img {
			width: 20px;
			.router-tabs-list-icon {
				position: absolute;
				top: 0;
				right: 0;
				font-size: 12px;
				color: #ffffff;
				padding: 2px;
			}
		}
	}
	.router-tabs-list:hover {
		// background: linear-gradient(180deg, #073764 0%, #031927 100%);
		background-color: #545c64;
		color: #ffffff;
	}
	.active-list {
		// background: linear-gradient(180deg, #073764 0%, #031927 100%);
		background-color: #545c64;
		color: #ffffff;
	}
}
</style>
